<template>
  <div
    class="rounded-2xl overflow-hidden shadow-md bg-white dark:bg-gray-800 transition transform hover:-translate-y-1 hover:shadow-xl relative flex flex-col sm:flex-row"
  >
    <!-- 图片部分 -->
    <img :src="data.cover" alt="cover" class="h-50 w-full sm:w-1/2 object-cover" />

    <!-- 内容部分 -->
    <div class="p-4 cursor-pointer flex-1 flex flex-col justify-between min-h-[260px]">
      <div>
        <!-- 标题和详情按钮 -->
        <h2 class="text-lg font-semibold flex justify-between items-center">
          <span>{{ data.title }}</span>
          <button @click.stop="goToDetail" class="text-sm text-blue-500 hover:underline">
            详情
          </button>
        </h2>
        <div class="text-xs text-gray-400 mt-4">{{ data.articleCount }} 篇文章</div>
        <!-- 描述部分 -->
        <p class="text-sm text-gray-500 mt-3 line-clamp-4">
          {{ data.summary }}
        </p>
      </div>

      <transition>
        <div
          class="overflow-hidden transition-all duration-300 mt-4 text-sm text-gray-600 dark:text-gray-300"
        >
          <div class="sm:flex-row justify-between text-xs">
            <div class="mt-2">👁️ 浏览：{{ data.visitCount }} 次</div>
            <div class="mt-2">📅 创建时间：{{ data.createTime }}</div>
            <div class="mt-2">⏰ 更新时间：{{ data.updateTime }}</div>
          </div>
        </div>
      </transition>
    </div>

    <!-- 置顶标志 -->
    <div
      v-if="data.isTop === 1"
      class="absolute top-2 left-2 bg-blue-500 dark:bg-blue-600 text-white text-xs px-2 py-1 rounded-full"
    >
      置顶
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  data: Object
})

const goToDetail = () => {
  router.push(`/wiki/${props.data.id}/${props.data.firstArticleId}`)
}
</script>

<style scoped>
.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
</style>
